<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .oo{
            width: 800px;
            height: 800px;
            background-color: pink;  
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            float: left;
        }
        .oo>div{
            font-size: 30px;
            text-align: center;
            margin: 10px;
            width: 150px;
            height: 150px;
            background-color: #fff;
        }
        .pic{
            width: 500px;
            height: 500px;
            float: left;
        }
        .empty div{
            width: 150px;
            height: 110px;
            /* background-color: red; */
        }
    </style>
</head>
<body>
    <div class="oo">
        <div class="empty"><span>蓝莓</span><div class="kong"></div></div>
        <div class="empty"><span>西瓜</span><div class="kong1"></div> </div> 
        <div class="empty"><span>香蕉</span><div class="kong2"></div> </div>
        <div class="empty"><span>猕猴桃</span><div class="kong3"></div> </div>
        <div class="empty"><span>葡萄</span><div class="kong4"></div> </div>
        <div class="empty"><span>草莓</span><div class="kong5"></div> </div>
        <div class="empty"><span>橙子</span><div class="kong6"></div> </div>
        <div class="empty"><span>苹果</span><div class="kong7"></div> </div>
        <div class="empty"><span>樱桃</span><div class="kong8"></div> </div>
        <div class="empty"><span>石榴</span><div class="kong9"></div> </div>
        <div class="empty"><span>椰子</span><div class="kong10"></div> </div>
        <div class="empty"><span>菠萝</span><div class="kong11"></div> </div>
        <div class="empty"><span>柠檬</span><div class="kong12"></div> </div>
        <div class="empty"><span>桃子</span><div class="kong13"></div> </div>
        <div class="empty"><span>梨子</span><div class="kong14"></div> </div>
        <div class="empty"><span>柚子</span><div class="kong15"></div> </div>
    </div>
    <div class="pic">
        <img draggable="true" src="img/1.png" alt="" class="pt">
        <img draggable="true" src="img/2.png" alt="" class="xg">
        <img draggable="true" src="img/3.png" alt="" class="cm">
        <img draggable="true" src="img/4.png" alt="" class="lz">
        <img draggable="true" src="img/5.png" alt="" class="xj">
        <img draggable="true" src="img/6.png" alt="" class="youz">
        <img draggable="true" src="img/7.png" alt="" class="pg">
        <img draggable="true" src="img/8.png" alt="" class="yt">
        <img draggable="true" src="img/9.png" alt="" class="sl">
        <img draggable="true" src="img/10.png" alt="" class="nm">
        <img draggable="true" src="img/11.png" alt="" class="tz">
        <img draggable="true" src="img/12.png" alt="" class="yz">
        <img draggable="true" src="img/13.png" alt="" class="bl">
        <img draggable="true" src="img/14.png" alt="" class="mht">
        <img draggable="true" src="img/15.png" alt="" class="lm">
        <img draggable="true" src="img/16.png" alt="" class="cz">
    </div>
    <script> 
        var sp = document.querySelector("span");
        var imgs = document.querySelectorAll("img");
        var box = document.querySelector(".kong");
        var box1 = document.querySelector(".kong1");
        var box2 = document.querySelector(".kong2");
        var box3 = document.querySelector(".kong3");
        var box4 = document.querySelector(".kong4");
        var box5 = document.querySelector(".kong5");
        var box6 = document.querySelector(".kong6");
        var box7 = document.querySelector(".kong7");
        var box8 = document.querySelector(".kong8");
        var box9 = document.querySelector(".kong9");
        var box10 = document.querySelector(".kong10");
        var box11 = document.querySelector(".kong11");
        var box12 = document.querySelector(".kong12");
        var box13 = document.querySelector(".kong13");
        var box14 = document.querySelector(".kong14");
        var box15 = document.querySelector(".kong15");
        var box16 = document.querySelector(".kong16");

        // document.addEventListener('drag',(e) => {
        //     // console.log(e.className);
        //     e.target.style.border = '5px dashed red';
        //     box.style.border = '5px dashed red';
        // },false);

        // document.addEventListener('dragend',(e) => {
        //     e.target.style.border = 'none';
        //     // console.log(e.class);
        //     box.style.border = 'none';
        // },false);
        for(i = 0;i<imgs.length;i++){
            imgs[i].index = i;
            imgs[i].onmousedown = function (){
            console.log(this.index);
            x = this.index;
            box.addEventListener('dragover', function(e) {
            e.preventDefault();
        },false);
        
        box.addEventListener('drop', (e) => {
            e.preventDefault();
            // console.log(e.className);
            if(x == 14){
                 e.target.appendChild(document.querySelector('.lm'));
            }
        },false);
        box1.addEventListener('dragover', function(e) {
            e.preventDefault();
        },false);

        box1.addEventListener('drop', (e) => {
            e.preventDefault();
            if(x == 1){
                 e.target.appendChild(document.querySelector('.xg'));
            }
        },false);
        box2.addEventListener('dragover', function(e) {
            e.preventDefault();
        },false);

        box2.addEventListener('drop', (e) => {
            e.preventDefault();
            if(x == 4){
                 e.target.appendChild(document.querySelector('.xj'));
            }
        },false);
        box3.addEventListener('dragover', function(e) {
            e.preventDefault();
        },false);

        box3.addEventListener('drop', (e) => {
            e.preventDefault();
            if(x == 13){
                 e.target.appendChild(document.querySelector('.mht'));
            }
        },false);
        box4.addEventListener('dragover', function(e) {
            e.preventDefault();
        },false);

        box4.addEventListener('drop', (e) => {
            e.preventDefault();
            if(x == 0){
                 e.target.appendChild(document.querySelector('.pt'));
            }
        },false);

        box5.addEventListener('dragover', function(e) {
            e.preventDefault();
        },false);

        box5.addEventListener('drop', (e) => {
            e.preventDefault();
            if(x == 2){
                 e.target.appendChild(document.querySelector('.cm'));
            }
        },false);

        box6.addEventListener('dragover', function(e) {
            e.preventDefault();
        },false);

        box6.addEventListener('drop', (e) => {
            e.preventDefault();
            if(x == 15){
                 e.target.appendChild(document.querySelector('.cz'));
            }
        },false);

        box7.addEventListener('dragover', function(e) {
            e.preventDefault();
        },false);

        box7.addEventListener('drop', (e) => {
            e.preventDefault();
            if(x == 6){
                 e.target.appendChild(document.querySelector('.pg'));
            }
        },false);

        box8.addEventListener('dragover', function(e) {
            e.preventDefault();
        },false);

        box8.addEventListener('drop', (e) => {
            e.preventDefault();
            if(x == 7){
                 e.target.appendChild(document.querySelector('.yt'));
            }
        },false);

        box9.addEventListener('dragover', function(e) {
            e.preventDefault();
        },false);

        box9.addEventListener('drop', (e) => {
            e.preventDefault();
            if(x == 8){
                 e.target.appendChild(document.querySelector('.sl'));
            }
        },false);

        box10.addEventListener('dragover', function(e) {
            e.preventDefault();
        },false);

        box10.addEventListener('drop', (e) => {
            e.preventDefault();
            if(x == 11){
                 e.target.appendChild(document.querySelector('.yz'));
            }
        },false);

        box11.addEventListener('dragover', function(e) {
            e.preventDefault();
        },false);

        box11.addEventListener('drop', (e) => {
            e.preventDefault();
            if(x == 12){
                 e.target.appendChild(document.querySelector('.bl'));
            }
        },false);

        box12.addEventListener('dragover', function(e) {
            e.preventDefault();
        },false);

        box12.addEventListener('drop', (e) => {
            e.preventDefault();
            if(x == 9){
                 e.target.appendChild(document.querySelector('.nm'));
            }
        },false);

        box13.addEventListener('dragover', function(e) {
            e.preventDefault();
        },false);

        box13.addEventListener('drop', (e) => {
            e.preventDefault();
            if(x == 10){
                 e.target.appendChild(document.querySelector('.tz'));
            }
        },false);

        box14.addEventListener('dragover', function(e) {
            e.preventDefault();
        },false);

        box14.addEventListener('drop', (e) => {
            e.preventDefault();
            if(x == 3){
                 e.target.appendChild(document.querySelector('.lz'));
            }
        },false);

        box15.addEventListener('dragover', function(e) {
            e.preventDefault();
        },false);

        box15.addEventListener('drop', (e) => {
            e.preventDefault();
            if(x == 5){
                 e.target.appendChild(document.querySelector('.youz'));
            }
        },false);

        }
        }
       
    
    </script>
</body>
</html>